<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>个人信息管理_蜗牛嗨购商城</title>
    <link rel="stylesheet" type="text/css" href="/css/index.css" />
    <script src="/js/jquery-3.7.1.min.js"></script>
    <style>
        .profile-container {
            width: 80%;
            margin: 20px auto;
            background: #fff;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
            padding: 20px;
        }
        
        .profile-tabs {
            display: flex;
            border-bottom: 1px solid #ddd;
            margin-bottom: 20px;
        }
        
        .profile-tab {
            padding: 10px 20px;
            cursor: pointer;
            margin-right: 5px;
            border: 1px solid transparent;
            border-bottom: none;
        }
        
        .profile-tab.active {
            border-color: #ddd;
            border-radius: 5px 5px 0 0;
            background: #f9f9f9;
        }
        
        .profile-content {
            padding: 20px 0;
        }
        
        .profile-section {
            display: none;
        }
        
        .profile-section.active {
            display: block;
        }
        
        .form-group {
            margin-bottom: 15px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        
        .form-group input {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        
        .avatar-container {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }
        
        .avatar-preview {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            overflow: hidden;
            margin-right: 20px;
        }
        
        .avatar-preview img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .btn-submit {
            background: #ff6700;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }
        
        .btn-submit:hover {
            background: #ff4500;
        }
        
        .captcha-container {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
        }
        
        .captcha-input {
            width: 150px;
            margin-right: 10px;
        }
        
        .captcha-image {
            height: 40px;
            cursor: pointer;
        }

        
        .error-message {
            color: red;
            font-size: 12px;
            margin-top: 5px;
            display: none;
        }
        
        /* 添加显示错误信息的样式 */
        .error-message.show {
            display: block;
        }
        
        /* 添加用于显示表单验证错误的样式 */
        .input-error {
            border: 1px solid red !important;
        }
    </style>
</head>

<body class="second">
<div class="brand_list container_2">
    <%--header--%>
    <div class="header">
        <h1 class="logo">
            <a title="" style="background:url('../../../resources/static/images/logo.png');" href="/">电子商务平台</a>
        </h1>
        <ul class="shortcut">
            <li class="first"><a href="/user/profile">我的账户</a></li>
            <li><a href="orders">我的订单</a></li>
            <li class='last'><a href="">使用帮助</a></li>
        </ul>
        <p class="loginfo">
            ${sessionScope.loginUser.account}您好，欢迎您来到购物！[<a href="/user/logout" class="reg">安全退出</a>]
        </p>
    </div>

    <div class="wrapper clearfix">
        <div class="profile-container">
            <div class="profile-tabs">
                <div class="profile-tab active" data-tab="basic-info">基本信息</div>
                <div class="profile-tab" data-tab="change-password">修改密码</div>
            </div>
            
            <div class="profile-content">
                <!-- 显示消息提示 -->
                <% if (request.getAttribute("message") != null) { %>
                <div class="success-message" style="color: green; margin-bottom: 15px;">
                    <%= request.getAttribute("message") %>
                </div>
                <% } %>
                <% if (request.getAttribute("error") != null) { %>
                <div class="error-message" style="color: red; margin-bottom: 15px;">
                    <%= request.getAttribute("error") %>
                </div>
                <% } %>
                
                <!-- 基本信息表单 -->
                <div class="profile-section active" id="basic-info">
                    <!-- 显示基本信息相关消息 -->
                    <c:if test="${not empty message}">
                        <div class="success-message" style="color: green; margin-bottom: 15px; display: block;">
                            ${message}
                        </div>
                    </c:if>
                    <c:if test="${not empty error}">
                        <div class="error-message" style="color: red; margin-bottom: 15px; display: block;">
                            ${error}
                        </div>
                    </c:if>

                    <form id="profileForm" action="/user/updateProfile" method="post">
                        <div class="avatar-container">
                            <div class="avatar-preview">
                                <img id="avatarImage" src="${sessionScope.loginUser.avatar == '' ? '/images/default_avatar.png' : sessionScope.loginUser.avatar}" alt="用户头像">
                            </div>
                            <div>
                                <input type="file" id="avatarInput" accept="image/*">
                                <input type="hidden" id="avatarUrl" name="avatar" value="${sessionScope.loginUser.avatar}">
                                <p>点击选择新头像</p>
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label for="account">用户名</label>
                            <input type="text" id="account" name="account" value="${sessionScope.loginUser.account}" readonly>
                            <p>用户名不可修改</p>
                        </div>
                        
                        <div class="form-group">
                            <label for="telphone">手机号码</label>
                            <input type="text" id="telphone" name="telphone" value="${sessionScope.loginUser.telphone}">
                            <p class="error-message" id="telphone-error">手机号格式不正确，必须是11位数字且以1开头</p>
                        </div>
                        
                        <div class="form-group">
                            <label for="email">电子邮箱</label>
                            <input type="email" id="email" name="email" value="${sessionScope.loginUser.email}">
                            <p class="error-message" id="email-error">邮箱格式不正确</p>
                        </div>
                        
                        <div class="form-group">
                            <label>验证码：</label>
                            <div class="captcha-container">
                                <input type="text" name="captcha" class="captcha-input" maxlength="5" required>
                                <img src="/captcha/generate" class="captcha-image" onclick="this.src='/captcha/generate?'+Math.random()" title="点击刷新验证码">
                                <span>看不清？点击图片刷新</span>
                            </div>
                        </div>
                        <button type="button" id="updateProfileBtn" class="btn-submit">保存修改</button>
                    </form>
                </div>
                
                <!-- 修改密码表单 -->
                <div class="profile-section" id="change-password">
                    <!-- 显示密码修改相关消息 -->
                    <c:if test="${not empty passwordMessage}">
                        <div class="success-message" style="color: green; margin-bottom: 15px; display: block;">
                            ${passwordMessage}
                        </div>
                    </c:if>
                    <c:if test="${not empty passwordError}">
                        <div class="error-message" style="color: red; margin-bottom: 15px; display: block;">
                            ${passwordError}
                        </div>
                    </c:if>
                    
                    <form id="passwordForm" action="/user/updatePassword" method="post">
                        <div class="form-group">
                            <label for="oldPassword">原密码</label>
                            <input type="password" id="oldPassword" name="oldPassword" required>
                            <p class="error-message" id="oldPassword-error">原密码不正确</p>
                        </div>
                        
                        <div class="form-group">
                            <label for="newPassword">新密码</label>
                            <input type="password" id="newPassword" name="newPassword" required>
                            <p class="error-message" id="newPassword-error">密码必须以大写字母开头，只能包含字母和数字，长度6-10位</p>
                        </div>
                        
                        <div class="form-group">
                            <label for="confirmPassword">确认新密码</label>
                            <input type="password" id="confirmPassword" name="confirmPassword" required>
                            <p class="error-message" id="confirmPassword-error">两次输入的密码不一致</p>
                        </div>
                        
                        <div class="form-group">
                            <label>验证码：</label>
                            <div class="captcha-container">
                                <input type="text" name="captcha" class="captcha-input" maxlength="5" required>
                                <img src="/captcha/generate" class="captcha-image" onclick="this.src='/captcha/generate?'+Math.random()" title="点击刷新验证码">
                                <span>看不清？点击图片刷新</span>
                            </div>
                        </div>
                        <button type="button" id="updatePasswordBtn" class="btn-submit">修改密码</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
    
    <script>
        $(function() {
            // 标签切换功能
            $('.profile-tab').click(function() {
                $('.profile-tab').removeClass('active');
                $(this).addClass('active');
                
                const tabId = $(this).data('tab');
                $('.profile-section').removeClass('active');
                $('#' + tabId).addClass('active');
            });
            
            // 头像上传预览
            $('#avatarInput').change(function() {
                const file = this.files[0];
                if (file) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        $('#avatarImage').attr('src', e.target.result);
                    }
                    reader.readAsDataURL(file);
                    
                    // 上传头像到服务器
                    uploadAvatar(file);
                }
            });
            
            // 上传头像函数
            function uploadAvatar(file) {
                const formData = new FormData();
                formData.append('file', file);
                
                $.ajax({
                    url: '/user/upload',
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function(response) {
                        $('#avatarUrl').val(response);
                    },
                    error: function() {
                        alert('头像上传失败，请重试');
                    }
                });
            }
            
            // 表单验证函数
            function validateTelphone(telphone) {
                const regex = /^1\d{10}$/;
                return regex.test(telphone);
            }
            
            function validateEmail(email) {
                const regex = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/;
                return regex.test(email);
            }
            
            function validatePassword(password) {
                const regex = /^[A-Z][A-Za-z0-9]{5,9}$/;
                return regex.test(password);
            }
            
            // 添加表单输入实时验证
            $('#telphone').on('input', function() {
                const telphone = $(this).val();
                if (!validateTelphone(telphone)) {
                    $('#telphone-error').show();
                    $(this).addClass('input-error');
                } else {
                    $('#telphone-error').hide();
                    $(this).removeClass('input-error');
                }
            });
            
            $('#email').on('input', function() {
                const email = $(this).val();
                if (!validateEmail(email)) {
                    $('#email-error').show();
                    $(this).addClass('input-error');
                } else {
                    $('#email-error').hide();
                    $(this).removeClass('input-error');
                }
            });
            
            $('#newPassword').on('input', function() {
                const password = $(this).val();
                if (!validatePassword(password)) {
                    $('#newPassword-error').show();
                    $(this).addClass('input-error');
                } else {
                    $('#newPassword-error').hide();
                    $(this).removeClass('input-error');
                }
            });
            
            $('#confirmPassword').on('input', function() {
                const newPassword = $('#newPassword').val();
                const confirmPassword = $(this).val();
                if (newPassword !== confirmPassword) {
                    $('#confirmPassword-error').show();
                    $(this).addClass('input-error');
                } else {
                    $('#confirmPassword-error').hide();
                    $(this).removeClass('input-error');
                }
            });
            
            // 更新个人信息
            $('#updateProfileBtn').click(function() {
                let isValid = true;
                
                // 验证手机号
                const telphone = $('#telphone').val();
                if (!validateTelphone(telphone)) {
                    $('#telphone-error').show();
                    $('#telphone').addClass('input-error');
                    isValid = false;
                } else {
                    $('#telphone-error').hide();
                    $('#telphone').removeClass('input-error');
                }
                
                // 验证邮箱
                const email = $('#email').val();
                if (!validateEmail(email)) {
                    $('#email-error').show();
                    $('#email').addClass('input-error');
                    isValid = false;
                } else {
                    $('#email-error').hide();
                    $('#email').removeClass('input-error');
                }
                
                if (isValid) {
                    $('#profileForm').submit();
                } else {
                    // 阻止表单提交并显示错误信息
                    alert('请修正表单中的错误后再提交');
                    return false;
                }
            });
            
            // 更新密码
            $('#updatePasswordBtn').click(function() {
                let isValid = true;
                
                // 验证新密码
                const newPassword = $('#newPassword').val();
                if (!validatePassword(newPassword)) {
                    $('#newPassword-error').show();
                    $('#newPassword').addClass('input-error');
                    isValid = false;
                } else {
                    $('#newPassword-error').hide();
                    $('#newPassword').removeClass('input-error');
                }
                
                // 验证确认密码
                const confirmPassword = $('#confirmPassword').val();
                if (newPassword !== confirmPassword) {
                    $('#confirmPassword-error').show();
                    $('#confirmPassword').addClass('input-error');
                    isValid = false;
                } else {
                    $('#confirmPassword-error').hide();
                    $('#confirmPassword').removeClass('input-error');
                }
                
                if (isValid) {
                    $('#passwordForm').submit();
                } else {
                    // 阻止表单提交并显示错误信息
                    alert('请修正表单中的错误后再提交');
                    return false;
                }
            });
        });
    </script>
</div>
</body>
</html>